<link rel="stylesheet" href="__CDN__/assets/addons/libs/element/element.css">
<script src="__CDN__/assets/addons/libs/vue.js"></script>
<script src="__CDN__/assets/addons/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/libs/moment.js"></script>
<style>
    .form-group .required:before{
        content:'* ';
        color:red;
    }
    .my_put{
        height: 32px;
        border: 1px solid #ccc;;
    }
    .el-upload__input{
        display: none !important;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div id="template-index">
        <div class="form-group">
            <label for="c-name" class="control-label col-xs-12 col-sm-2 required">客户名字:</label>
            <div class="col-xs-12 col-sm-6">
                <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$orderData.name ?? ''}" placeholder="">

            </div>
        </div>
        <div class="form-group">
            <label for="c-name" class="control-label col-xs-12 col-sm-2 required">客户Email:</label>
            <div class="col-xs-12 col-sm-6">
                <input id="c-email" data-rule="required" class="form-control" name="row[email]" type="text" value="{$orderData.email ?? ''}" placeholder="">

            </div>
        </div>
        <div class="form-group">
            <label for="c-mobile" class="control-label col-xs-12 col-sm-2">客户手机:</label>
            <div class="col-xs-12 col-sm-6">
                <input id="c-mobile" data-rule="" class="form-control" name="row[mobile]" type="text" value="{$orderData.mobile ?? ''}" placeholder="">

            </div>
        </div>
        <div class="form-group">
            <label for="c-address" class="control-label col-xs-12 col-sm-2 required">客户地址:</label>
            <div class="col-xs-12 col-sm-6">
                <input id="c-address" data-rule="required" class="form-control" name="row[address]" type="text" value="{$orderData.address ?? ''}" placeholder="">

            </div>
        </div>
        <div class="form-group">
            <label for="c-address" class="control-label col-xs-12 col-sm-2 required">性別:</label>
            <div class="col-xs-12 col-sm-6">
                {:build_radios('row[sex]', ['1'=>'男士', '2'=>'女士'], $sex)}
            </div>
        </div>
        <div class="form-group">
            <label for="c-address" class="control-label col-xs-12 col-sm-2 required">总金额:</label>
            <div class="col-xs-12 col-sm-6">
                <input id="c-total_price" data-rule="required" class="form-control" name="row[total_price]" type="number" value="{$orderData.total_price ?? ''}" placeholder="">

            </div>
        </div>
        <div class="form-group">
            <label for="c-name" class="control-label col-xs-12 col-sm-2 required">货到付款:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="radio">
                    <label for="row[need_weikuan]-1"><input id="row[need_weikuan]-1" {if $need_weikuan eq -1} checked="checked"{/if} name="row[need_weikuan]" type="radio" value="-1" onchange="changeType(-1)"> 否</label>
                    <label for="row[need_weikuan]-2"><input id="row[need_weikuan]-2" {if $need_weikuan neq -1} checked="checked"{/if} name="row[need_weikuan]" type="radio" value="1" onchange="changeType(1)"> 是</label>
                </div>
            </div>
        </div>

        <div class="form-group" id="yufu_price_box" {if $need_weikuan eq -1}style="display: none"{/if}>
            <label for="c-address" class="control-label col-xs-12 col-sm-2 required">已付定金:</label>
            <div class="col-xs-12 col-sm-6">
                <input id="c-yufu_price" data-rule="" class="form-control" name="row[yufu_price]" type="number" value="{$orderData.yufu_price ?? 0}" placeholder="">

            </div>
        </div>

    <div class="form-group" >
        <label for="c-account_id" class="control-label col-xs-12 col-sm-2 required">收款号码:</label>
        <div class="col-xs-12 col-sm-6">

            <select  class="form-control selectpicker" data-rule="required" data-live-search="true" name="row[payaccount_id]" value="{$orderData.payaccount_id ?? 0}">
                <option value="0">请选择一个收款号码</option>
                {foreach name="accountDataArr" item="oneG" key='k'}
                <option value="{$oneG.id}" {if (empty($orderData) neq true and $orderData['payaccount_id'] eq $oneG.id)} selected {/if}>{$oneG.name}</option>
                {/foreach}
            </select>
        </div>
    </div>


    <div class="form-group" >
        <label for="c-address" class="control-label col-xs-12 col-sm-2">订单备注:</label>
        <div class="col-xs-12 col-sm-6">
            <input id="c-remark" data-rule="" class="form-control" name="row[remark]" type="text" value="{$orderData.remark ?? ''}" placeholder="">

        </div>
    </div>



    {if $id >0}
    <div class="form-group">
        <label for="c-address" class="control-label col-xs-12 col-sm-2 required">订单状态:</label>
        <div class="col-xs-12 col-sm-6">
            <select  name="row[status]" id="" class="form-control selectpicker" data-rule=""  >
                <option value="0">请选择状态</option>
                {foreach name="statusList" item="oneS" }
                <option value="{$oneS.id}" {if (empty($orderData) neq true and $orderData['status'] eq $oneS.id)} selected {/if}>{$oneS.name}</option>
                {/foreach}
            </select>

        </div>
    </div>
    {else/}
    <div class="form-group">
        <label for="c-name" class="control-label col-xs-12 col-sm-2 required">支付状态:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label for="row[status]-1000"><input id="row[status]-1000" {if $status eq 1000} checked="checked"{/if} name="row[status]" type="radio" value="1000" > 待付款</label>
                <label for="row[status]-2000"><input id="row[status]-2000" {if $status eq 2000} checked="checked"{/if} name="row[status]" type="radio" value="2000" > 已付款</label>
            </div>
        </div>
    </div>
    {/if}


    <div id="all_product">
        <div class="one_product" v-for="(item,index) in tableData" :key="index">
            <div  class="form-group" style="margin-top: 30px;margin-bottom:20px;border-bottom: 1px solid #e3e3e3">

                <div></div>
            </div>
            <div class="form-group" >
                <label for="c-title" class="control-label col-xs-12 col-sm-2 required">产品名:</label>
                <div class="col-xs-12 col-sm-6">
                    <input id="c-title" data-rule="" class="form-control" name="row[title][]" type="text" placeholder="" v-model="item.title">
                    <input id="c-id" data-rule="" class="form-control" name="row[product_id][]" type="hidden" placeholder="" v-model="item.id">

                </div>
            </div>
            <div class="form-group" >
                <label for="c-title" class="control-label col-xs-12 col-sm-2 required">图片:</label>
                <div class="col-xs-12 col-sm-10">
                    <el-upload

                            :ref="'upload' + index"
                            :action="uploadUrl"
                            :file-list="item.fileList"
                            list-type="picture-card"
                            :before-upload="beforeUploadFile"
                            :on-success="(response, file, fileList) => handleSuccess(index, response, file, fileList)"
                            multiple
                            :limit="4"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="(file, fileList) => handleRemovePictureBox(index,file, fileList)">
                        <i class="el-icon-plus"></i>
                    </el-upload>

                </div>
            </div>

            <input id="c-thumbs" data-rule="" class="form-control" name="row[thumbs][]" type="hidden" placeholder=""  v-model="item.thumbs">


            <div class="form-group" >
                <label for="c-guige" class="control-label col-xs-12 col-sm-2">规格:</label>
                <div class="col-xs-12 col-sm-6">
                    <input id="c-guige" data-rule="" class="form-control" name="row[guige][]" type="text"  placeholder="" v-model="item.guige">

                </div>
            </div>
            <div class="form-group" >
                <label for="c-xinghao" class="control-label col-xs-12 col-sm-2">型号:</label>
                <div class="col-xs-12 col-sm-6">
                    <input id="c-xinghao" data-rule="" class="form-control" name="row[xinghao][]" type="text"  placeholder="" v-model="item.xinghao">

                </div>
            </div>
            <div class="form-group" >
                <label for="c-price" class="control-label col-xs-12 col-sm-2 required">售价:</label>
                <div class="col-xs-12 col-sm-6">
                    <input id="c-price" data-rule="" class="form-control" name="row[price][]" type="number" v-model="item.price">

                </div>
            </div>
            <div class="form-group" >
                <label for="c-nums" class="control-label col-xs-12 col-sm-2 required">数量:</label>
                <div class="col-xs-12 col-sm-6">
                    <input id="c-nums" data-rule="" class="form-control" name="row[nums][]" type="number" v-model="item.nums" >

                </div>
            </div>
            <div class="form-group" >
                <label for="c-url" class="control-label col-xs-12 col-sm-2">产品URL:</label>
                <div class="col-xs-12 col-sm-6">
                    <input id="c-url" data-rule="" class="form-control" name="row[url][]" type="text" v-model="item.url" >

                </div>
            </div>
            <div class="form-group" >
                <label for="c-factory_id" class="control-label col-xs-12 col-sm-2 required">供货商:</label>
                <div class="col-xs-12 col-sm-6">

                    <select  class="form-control selectpicker" data-rule="required" data-live-search="true" name="row[factory_id][]" v-model="item.factory_id">
                        <option value="0">请选择一个供货</option>
                        {foreach name="factoryDataArr" item="oneG" key='k'}
                        <option value="{$oneG.id}" >{$oneG.name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="form-group" >
                <label for="c-cost_price" class="control-label col-xs-12 col-sm-2">拿货成本:</label>
                <div class="col-xs-12 col-sm-6">
                    <input id="c-cost_price" data-rule="" class="form-control" name="row[cost_price][]" type="number"  v-model="item.cost_price">

                </div>
            </div>
            <div class="form-group" >
                <label for="c-remark2" class="control-label col-xs-12 col-sm-2">备注信息:</label>
                <div class="col-xs-12 col-sm-6">
                    <input id="c-remark2" data-rule="" class="form-control" name="row[remark2][]" type="text"  v-model="item.remark">

                </div>
            </div>

            <div class="form-group">
                <label for="c-address" class="control-label col-xs-12 col-sm-2"></label>
                <div class="col-xs-12 col-sm-6">
                    <span class="btn btn-danger btn-info" title=""  v-on:click="remove()"><i class="fa fa-minus-circle"></i>移除</span>

                </div>
            </div>

        </div>
    </div>


    <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <div class="form-group" style="margin-top: 15px">
        <label for="c-address" class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-6">
            <span class="btn btn-success btn-info" title=""  v-on:click="addTable()"><i class="fa fa-plus"></i>添加一个商品</span>

        </div>
    </div>


    </div>

    <div style="height: 40px"></div>




    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <input type="hidden" name="row[id]" value="{$id}">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<script src="/assets/libs/jquery/dist/jquery.js"></script>
<script>
    function changeType(type){
        if(type == -1){
            $("#yufu_price_box").hide();

        }
        if(type == 1){
            $("#yufu_price_box").show();
        }
    }



</script>

